import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import { useBasicStore } from '@/stores/basic'
import { DeviceEnum } from '@/const/enum'
import toNative from '@/utils/toNative'
import type { ComponentPublicInstance } from 'vue'
import style from './Drawer.module.scss'
import { Button, Drawer } from 'ant-design-vue'
import styled from 'vue3-styled-components'

@Component
export class CDrawer extends Render {
    @Prop() show!: boolean
    @Prop() size?: string | number
    @Prop({ default: false }) resetStyle?: boolean
    @Prop({ default: false }) hideCancel?: boolean

    basicStore = useBasicStore()
    showDrawer = false

    @Emit('update:show')
    updateShow(val: boolean) {
        return val
    }

    @Watch('show', { immediate: true })
    handleWatchShow() {
        this.showDrawer = this.show
    }
    @Watch('showDrawer')
    handleWatchShowDialog() {
        this.updateShow(this.showDrawer)
    }

    render(data: ComponentPublicInstance) {
        return (
            <Drawer
                v-model:open={this.showDrawer}
                width={this.size}
                v-bind={this.$attrs}
                modal-class={`${this.resetStyle} ? ${style['reset-dialog']} : ''}`}
                title={this.$attrs.title as string}
                contentWrapperStyle={{
                    maxWidth: '95vw',
                    overflowX: 'auto'
                }}
                style={{
                    minWidth: (typeof this.size === 'number' ? `${this.size}px` : this.size) || '1080px'
                }}
                v-slots={{
                    title: data.$slots.header,
                    default: data.$slots.default,
                    footer: () => {
                        return (
                            <div class="flex justify-center gap-16px">
                                {!this.hideCancel && <Button onClick={() => this.showDrawer = false}>取消</Button>}
                                {data?.$slots?.footer?.()}
                            </div>
                        )
                    },
                }}
            ></Drawer>
        )
    }
}

export default toNative<{ show: boolean; [key: string]: any }, {}>(CDrawer)
